<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-04-16 16:45:54
-->
<template>
  <drawer-box>
    <template v-slot:content>
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model.trim="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="放音类型" prop="playType">
          <el-select v-model="formData.playType" placeholder="请选择放音类型">
            <el-option label="语音库" value="voiceLibrary"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="voice" label="语音文件" prop="voice">
          <template #label>
            <span class="jump-voice">
              <span>语音文件</span>
              <el-button type="primary" link @click="onJump">配置语音库</el-button>
            </span>
          </template>
          <div style="display: flex">
            <el-select-v2
              style="width: 487px"
              size="mini"
              v-model="formData.voice"
              :placeholder="'请选择语音文件'"
              filterable
              :multiple="false"
              :collapse-tags="false"
              :options="voiceLibraryList"
              :remote="true"
              value-key="id"
              :defaultProps="{ label: 'name', value: 'id' }"
              clearable
            >
            </el-select-v2>
            <Audio
              :row="{
                url: currentVoice.fileUrl
              }"
              style="margin-left: 10px"
              v-if="currentVoice.fileUrl"
            />
          </div>
        </el-form-item>
        <el-form-item prop="replayTimes">
          <template v-slot:label>
            <span>
              重播次数
              <el-tooltip
                :show-after="500"
                class="item"
                effect="dark"
                content="话术录音最多重复播放的次数，到达次数后客户未正确响应则挂机，次数为2则播放3次，默认为2"
                placement="top"
              >
                <span class="MC_iconfont MC_icon-yiwen-mian tip-span"></span>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model.trim="formData.replayTimes" size="mini">
            <template v-slot:append>次</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="replayInterval">
          <template v-slot:label>
            <span>
              重播间隔
              <el-tooltip
                :show-after="500"
                class="item"
                effect="dark"
                content="语音播放重复间隔的时间，到达间隔时间后客户未正确响应则重播，最小时间为1秒，建议最大时间不超过5秒"
                placement="top"
              >
                <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model.trim="formData.replayInterval" size="mini">
            <template v-slot:append>秒</template>
          </el-input>
        </el-form-item>
        <div class="el-form-item__label condition-box">
          <span>分支按键</span>
        </div>
        <div :class="['select-group', index !== 0 && 'to-top']" v-for="(item, index) in condition" :key="index">
          <div class="select-box small-box">
            <el-form-item :label="index === 0 ? '按键' : ''" prop="region">
              <el-select
                v-model="item.value"
                placeholder="请选择按键"
                @change="selectChange(item.value, index)"
                clearable
              >
                <el-option
                  v-for="(key, index) in filterKeyList"
                  :label="key.value"
                  :value="key.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="index === 0 ? '节点' : ''">
              <el-select v-model="item.to" placeholder="请选择下一步节点" clearable style="width: 100%" filterable>
                <el-option
                  v-for="(node, index) in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id && node.id !== 'startNode'"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div :class="['select-operation', index !== 0 && 'select-operation-move']">
            <span @click="addCondition" v-if="index === 0">
              <i style="color: #1e63f5" class="MC_iconfont MC_icon-shanchu2-xian MC_icon-tianjia-yuan-xian"></i>
            </span>
            <span v-else @click="deleteCondition(item, index)"
              ><i class="MC_iconfont MC_icon-shanchu2-xian delete-span"></i
            ></span>
          </div>
        </div>
      </el-form>
    </template>
    <template v-slot:operation>
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template v-slot:remove>
      <el-button @click="deleteNode" type="danger" :icon="Delete" size="mini">删除</el-button>
    </template>
  </drawer-box>
</template>

<script lang="ts" setup>
import drawerBox from '@/app/call-center/components/drawer-box.vue'
import { withDefaults, defineProps, ref, defineExpose, reactive, computed } from 'vue'
import useNodeCommon from './use-node-common'
import { Delete } from '@element-plus/icons-vue'
import Audio from '@/common/components/audio/audio-operate.vue'
import { useRouter } from 'vue-router'
const nodeForm: any = ref(null)
const props = withDefaults(
  defineProps<{
    data: any
    currentNode: any
    save: (...arg: any) => void
    cancel: () => void
    delete: (...arg: any) => void
  }>(),
  {
    data: {},
    currentNode: {}
  }
)
const {
  currentVoice,
  nodeList,
  currentData,
  labelPosition,
  rules,
  formData,
  voiceLibraryList,
  condition,
  cancel,
  onSubmit,
  deleteNode,
  deleteCondition
}: any = useNodeCommon({
  data: props.data,
  currentNode: props.currentNode,
  nodeForm,
  save: props.save,
  cancel: props.cancel,
  delete: props.delete
})

type State = {
  keyList: object[]
  pagingData: any
  query: any
}

defineExpose({
  remoteUrl: '/call/action/ivr/voiceLibrary/query'
})

const state: State = reactive({
  keyList: [
    {
      name: '按键1',
      value: '1'
    },
    {
      name: '按键2',
      value: '2'
    },
    {
      name: '按键3',
      value: '3'
    },
    {
      name: '按键4',
      value: '4'
    },
    {
      name: '按键5',
      value: '5'
    },
    {
      name: '按键6',
      value: '6'
    },
    {
      name: '按键7',
      value: '7'
    },
    {
      name: '按键8',
      value: '8'
    },
    {
      name: '按键9',
      value: '9'
    },
    {
      name: '按键0',
      value: '0'
    },
    {
      name: '按键#',
      value: '#'
    },
    {
      name: '按键*',
      value: '*'
    }
  ],
  pagingData: {
    limit: 10,
    page: 1
  },
  query: {}
})

const router = useRouter()
const onJump = () => {
  router.push('/app/call_router/voice-library')
}

const selectChange = (id: any, index: any) => {
  setConditionName(state.keyList, index, 'value', id)
}

const setConditionName = (dataList: any[], conditionIndex: string | number, key: string | number, value: any) => {
  condition.value[conditionIndex].label = dataList.find((i: any) => i[key] === value).name
}

const filterKeyList: any = computed(() => {
  return state.keyList.filter((item: any) => {
    let cur = false
    condition.value.some((conItem: any) => {
      if (item.value === conItem.value) {
        cur = true
        return true
      }
    })
    return !cur
  })
})

const addCondition = () => {
  condition.value.push({
    label: '',
    value: '',
    to: ''
  })
}
</script>
<style lang="stylus" scoped>
.audioProgress
  margin 0 10px 0
</style>
<style lang="stylus" scoped>

.select-group
  margin-bottom: -10px;
.select-operation
  span
    padding-top 36px
    display block
    color rgba(0, 0, 0, 0.38)
    cursor pointer
.select-operation-move
  height: 36px;
  display: flex;
  align-items: center;
  span
    height: 20px;
    padding-top: 0;
.to-top
  // position relative
  // top -10px
.condition-box
  font-weight: 500;
  &::before
    content: "*";
    color: var(--el-color-danger);
    margin-right: 4px;
.addCondition
  display flex
  align-items center
  color: #008cee;
  cursor pointer
  margin-bottom 15px
  i
    font-size 16px
.delete-span
  &:hover
    color $c-danger
.add-span
  &:before
    margin-right 4px
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
.voice
  :deep(.el-form-item__label)
    padding-right 0
  // .MC_icon-qiyong-kaishi
  //   color: #d3dffd;
.jump-voice
  display: inline-flex !important;
  justify-content: space-between !important;
  align-items: center;
  width: 97.8% !important;
  /* margin-bottom: 9px !important; */
  padding-left: 10px;
  color: rgba(0,0,0,0.6) !important;
  padding-left: 0;
  font-weight: 500 !important;
  position: relative;
  span
    padding-left 0 !important
    font-size 14px !important
    color: rgba(0,0,0,0.6) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  :deep(.el-button span)
    color var(--mc-main-color) !important
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative;
    right: -2px;
</style>
